<template>
  <div class="app-container">
    <!-- 顶部筛选 -->
    <SelectTop
      :tableSelectData.sync="tableSelectData"
      @updateTable="getProductList"
    />

    <!-- 表格 -->
    <StuTable
      :selection="true"
      :selectionList.sync="selectionList"
      max-height="700"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :stripe="true"
      border
      :list="tableData"
      :handles="handles"
      :columns="columns"
      @handleClick="handleClick"
    >
      <!--序号-->
      <template v-slot:index="{ scope }">
        <div class="index">
          <span>
            {{
              (pageConfig.page - 1) * pageConfig.pageSize + scope.$index + 1
            }}</span
          >
        </div>
      </template>

      <!--排列 -->
      <template v-slot:overHead="{ scope }">
        <div @click="handleOverHead(scope)" class="sort-box">
          <span>置顶</span>
        </div>
      </template>

      <!-- 产品图片 -->
      <template v-slot:prtPicture="{ scope }">
        <i
          @click="handleViewBtn(scope.row, 'picture')"
          class="el-icon-picture-outline"
        ></i>
      </template>

      <!-- 产品二维码 -->
      <template v-slot:prtQRCode="{ scope }">
        <i
          @click="handleViewBtn(scope.row, 'QRCode')"
          class="el-icon-s-grid"
        ></i>
      </template>

      <!-- 产品视频 -->
      <template v-slot:prtVideo="{ scope }">
        <i
          @click="handleViewBtn(scope.row, 'video')"
          class="el-icon-video-camera"
        ></i>
      </template>
    </StuTable>

    <!-- 底部按钮 -->
    <div class="footer">
      <el-button @click="delProduct" type="warning">删除</el-button>
      <el-button
        @click="handleIsOn(tableSelectData.isOn == 0 ? 1 : 0)"
        :type="tableSelectData.isOn == 0 ? 'info' : 'success'"
        >{{ tableSelectData.isOn == 0 ? "放入仓库" : "上架" }}</el-button
      >
      <el-button @click="download">下载二维码</el-button>
      <!-- 展示的二维码 -->
      <div v-for="item in selectionList" :key="item.uuid">
        <div v-show="false" :id="item.uuid" :ref="item.uuid"></div>
      </div>
      <!-- <el-button type="primary">下载图片</el-button> -->
    </div>

    <!-- 分页 -->
    <Pagination
      :total="pageConfig.total"
      :page.sync="pageConfig.page"
      :pageSizes="undefined"
      :pageSize.sync="pageConfig.pageSize"
      @pagination="getPagination"
    />

    <!-- 图片播放弹窗 -->
    <Picture
      v-if="dialogs.picture"
      :visible.sync="dialogs.picture"
      :roleInfo="dialogs.row"
    />

    <!-- 二维码播放弹窗 -->
    <QECode
      v-if="dialogs.QRCode"
      :visible.sync="dialogs.QRCode"
      :roleInfo="dialogs.row"
    />

    <!-- 视频播放弹窗 -->
    <VideoView
      v-if="dialogs.video"
      :visible.sync="dialogs.video"
      :roleInfo="dialogs.row"
    />
  </div>
</template>

<script>
import { getProductList, updateProduct, delProduct } from "@/api";
import { getAllQRCode } from "@/api/QRCode";
import SelectTop from "./components/selectTop/SelectTop";
import VideoView from "./components/VideoView";
import Picture from "./components/PictureView";
import QECode from "./components/QRCode";
export default {
  name: "ProductCategory",
  components: {
    SelectTop,
    VideoView,
    Picture,
    QECode
  },
  data() {
    return {
      //表单数据--------------------------------------------
      tableData: [],
      //表单配置--------------------------------------------
      columns: [
        { name: "序号", value: "index", slotName: "index" },
        {
          name: "产品二维码",
          value: "typeName",
          slotName: "prtQRCode",
          width: 100
        },
        { name: "产品图片", value: "registerDate", slotName: "prtPicture" },
        { name: "产品视频", value: "prtVideo", slotName: "prtVideo" },
        { name: "产品名称", value: "prtName" },
        { name: "发布时间", value: "optionDate" },
        { name: "价格", value: "prtPrice" },
        { name: "浏览量", value: "ifStop" },
        { name: "排序", value: "overHead", slotName: "overHead" }
      ],
      //选中的数据--------------------------------------------
      selectionList: [],
      //表格的操作列--------------------------------------------
      handles: {
        name: "操作",
        width: "200",
        show: true,
        btns: [
          {
            name: "编辑",
            type: "edit",
            show: true,
            btnType: "text",
            directive: "fun_70_SRGRKy"
          }
        ]
      },

      //表格筛选信息--------------------------------------------
      tableSelectData: {
        isOn: 0,
        prtCode: "",
        prtName: "",
        releaseTime: ""
      },

      //分页数据--------------------------------------------
      pageConfig: {
        total: 10,
        page: 1,
        pageSize: 10
      },
      //弹窗--------------------------------------------
      dialogs: {
        //图片
        picture: false,
        //二维码
        QRCode: false,
        //视频
        video: false,
        //数据
        row: {}
      }
    };
  },

  created() {
    this.getProductList();
  },

  methods: {
    // 下载二维码
    download() {
      if (this.selectionList.length == 0) {
        this.$message({ type: "warning", message: "请选择需要下载的二维码" });
        return;
      }
      let uuidStr = "";
      this.selectionList.forEach(item => {
        uuidStr += item.uuid + ",";
      });
      this.downloadQrcode(uuidStr);
    },

    // 下载二维码
    downloadQrcode(uuidStr) {
      const params = {
        uuids: uuidStr
      };
      getAllQRCode(params).then(res => {
        let QRCode = res.data;
        const blob = new Blob([QRCode]);
        const url = window.URL.createObjectURL(blob);
        let link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "QRCode.zip");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },

    //点击查看--------------------------------------------
    handleViewBtn(row, type) {
      this.$set(this.dialogs, type, true);
      this.$set(this.dialogs, "row", row);
    },
    //置顶--------------------------------------------
    handleOverHead(scope) {
      //提醒--------------------------------------------
      this.$confirm(`此操作将置顶, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const data = {
            overHead: 1,
            uuid: scope.row.uuid
          };
          this.updateProduct(data);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改"
          });
        });
    },

    //获取商品信息--------------------------------------------
    async getProductList() {
      const shopUuid = this.$store.getters.shopUuid;
      const params = {
        ...this.tableSelectData,
        page: this.pageConfig.page,
        pageSize: this.pageConfig.pageSize,
        shopUuid
      };
      let res = await getProductList(params).catch(err => console.log(err));

      if (!res) return;
      this.tableData = res.items;
      this.$set(this.pageConfig, "total", res.total);
    },

    //删除产品--------------------------------------------
    delProduct() {
      if (this.selectionList.length == 0) {
        return this.$message({
          type: "warning",
          message: "请勾选要删除的数据"
        });
      }
      this.$confirm(`此操作将删除选中的数据, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let uuid = "";
          this.selectionList.forEach(item => (uuid += item.uuid + ","));
          const data = {
            uuid
          };
          delProduct(data).then(res => {
            if (res.state == 100) {
              this.getProductList();
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //修改商品--------------------------------------------
    async updateProduct(data) {
      const res = await updateProduct(data);
      if (res.state == 100) {
        this.getProductList();
        this.$message({
          type: "success",
          message: res.msg
        });
      }
    },

    //上架--------------------------------------------
    handleIsOn(isOn) {
      if (this.selectionList.length == 0) {
        return this.$message({
          type: "warning",
          message: "请勾选要修改的数据"
        });
      }
      let uuid = "";
      this.selectionList.forEach(item => (uuid += item.uuid + ","));
      const data = {
        isOn,
        uuid
      };
      this.updateProduct(data);
    },

    //操作点击--------------------------------------------
    handleClick(row, type) {
      switch (type) {
        case "edit":
          this.dialogs.editCategory = true;
          this.dialogs.row = row;
          break;
        default:
          break;
      }
    },

    //分页数据-------------------------------------------
    getPagination(data) {
      this.$set(this.pageConfig, "page", data.page);
      this.$set(this.pageConfig, "pageSize", data.pageSize);
      this.getProductList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/element-ui.scss";
.app-container {
  .sort-box {
    color: $--color-primary;
    & > span {
      cursor: pointer;
    }
  }

  .el-icon-video-camera,
  .el-icon-picture-outline,
  .el-icon-s-grid {
    font-size: 17px;
    cursor: pointer;
  }

  .footer {
    margin: 20px 0;
  }
}
</style>
